<template>
  <div class="datav-header">
    <div class="datav-header-left-text">
      <a-space> </a-space>
    </div>
    <div class="center-title">
      <dv-decoration-7>水文安全生产数字化系统监控台</dv-decoration-7>
    </div>
    <div class="datav-header-right-time-and-full-controll">
      <a-space>
        <!-- 显示当前时间 -->
        <span style="color: black">{{ currentDate }} {{ currentTime }} {{ currentWeek }}</span>
        <span style="color: #5cd9e8; cursor: pointer" v-show="!isFullscreen" @click="enter">
          <FullscreenOutlined />
        </span>
        <span style="color: #5cd9e8; cursor: pointer" v-show="isFullscreen" @click="exit">
          <FullscreenExitOutlined />
        </span>
      </a-space>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, unref, onMounted, onUnmounted, computed } from 'vue';
  import { useFullscreen } from '@vueuse/core';
  import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';

  import moment from 'moment';

  export default {
    name: 'TopHeader',
    components: {
      FullscreenExitOutlined,
      FullscreenOutlined,
    },
    setup(props, context) {
      const { enter, toggle, exit, isFullscreen } = useFullscreen();
      const datetimeInterval = ref(null);
      const currentDate = ref('2023-7-20');
      const currentTime = ref('12:19:45');
      const currentWeek = ref('星期');

      const getTitle = computed(() => {
        return unref(isFullscreen)
          ? t('layout.header.tooltipExitFull')
          : t('layout.header.tooltipEntryFull');
      });

      function updateCurrentDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let week = now.getDay(); //返回的是一个介于0（代表星期日）到6（代表星期六）之间的整数
        let hour = now.getHours();
        let minute = now.getMinutes();
        let seconds = now.getSeconds();

        currentDate.value =
          year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day);
        currentTime.value =
          (hour > 9 ? hour : '0' + hour) +
          ':' +
          (minute > 9 ? minute : '0' + minute) +
          ':' +
          (seconds > 9 ? seconds : '0' + seconds);
        switch (week) {
          case 1:
            currentWeek.value = '星期一';
            break;
          case 2:
            currentWeek.value = '星期二';
            break;
          case 3:
            currentWeek.value = '星期三';
            break;
          case 4:
            currentWeek.value = '星期四';
            break;
          case 5:
            currentWeek.value = '星期五';
            break;
          case 6:
            currentWeek.value = '星期六';
            break;
          case 0:
            currentWeek.value = '星期日';
            break;
          default:
            currentWeek.value = '星期';
            break;
        }
      }

      /**
       * Get an array of moment instances, each representing a day beween given timestamps.
       * @param {string|Date} from start date
       * @param {string|Date} to end date
       */
      function daysBetween(from, to) {
        const fromDate = moment(new Date(from)).startOf('day');
        const toDate = moment(new Date(to)).endOf('day');

        const days = moment.duration(toDate.diff(fromDate)).asDays();
        return days;
      }

      onMounted(() => {
        datetimeInterval.value = setInterval(updateCurrentDateTime, 500);
      });
      onUnmounted(() => {
        clearInterval(datetimeInterval.value);
      });

      return {
        enter,
        toggle,
        exit,
        isFullscreen,
        currentDate,
        currentTime,
        currentWeek,
        updateCurrentDateTime,
      };
    },
  };
</script>

<style lang="less">
  @import './../datav.less';
</style>
